<template>
    <div>
        <!-- 条件渲染的DOM -->
       <p v-if="type==='a'">A</p>
       <p v-else-if="type==='b'">B</p>
       <p v-else>other</p>

        <!-- 渲染DOM使用display:none来切换显示隐藏 -->
       <p v-show="type==='a'">A By v-show</p>
       <p v-show="type==='b'">B By v-show</p>


       <!-- 如果更新不是很频繁则使用v-if,会销毁DOM节点，不要把过多东西暴露在浏览器中 -->
            
       <!-- 如果频繁切换则v-show.提高性能 -->

    </div>
</template>
<script>
export default {
    data() {
        return {
            type:'a'
        }
    }
}
</script>
<style>
    
</style>